import React, { useEffect } from 'react';

import './map.scss'

interface Props {   
}

function MyMap(props:Props) {

    useEffect(()=>{
        var map = new BMapGL.Map("container");          // 创建地图实例 
        var point = new BMapGL.Point(120.163233, 30.27104606);  // 创建点坐标 
        map.centerAndZoom(point, 12);                 // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom();     //开启鼠标滚轮缩放
        // map.setHeading(64.5);   //设置地图旋转角度
        map.setTilt(50);       //设置地图的倾斜角度
        var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
        map.addControl(scaleCtrl);
        var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
        map.addControl(zoomCtrl);
        var navi3DCtrl = new BMapGL.NavigationControl3D();  // 添加3D控件
        map.addControl(navi3DCtrl);
        // var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
        // map.addControl(cityCtrl); 
    },[])

    return (
        <div className='map'>
            <div id="container">
            </div> 
        </div>
    ); 
}

export default MyMap;